<template>
    <div class="app">
        <el-card class="box-card">
            <template #header>
                <div class="card-header">
                    <span>账号信息</span>
                </div>
            </template>
            <div class="container">
                <div>
                    ID:<span>{{ accInfo_store.id }}</span>
                </div>
                <el-divider></el-divider>
                <div>
                    账号:<span>{{ accInfo_store.account }}</span>
                </div>
                <el-divider></el-divider>
                <div>
                    用户组:<span>{{ accInfo_store.userGroup }}</span>
                </div>
                <el-divider></el-divider>
                <div>
                    创建时间:<span>{{ accInfo_store.ctime }}</span>
                </div>
                <el-divider></el-divider>
                <div class="imgbox"><!--  -->
                    <div>头像:</div>
                    <!-- 修改头像 -->
                    <el-upload class="avatar-uploader" action="http://sell.h5.itsource.cn:8087/users/avatar_upload"
                        :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                        <img v-if="accInfo_store.imgUrl" :src="accInfo_store.imgUrl" class="avatar" />
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </div>
            </div>
        </el-card>
    </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';
//  引入UI
import { ElMessage } from "element-plus";
// 引入仓库 取数据和函数
import { useUser } from "../../store/useUser.ts"
// 获取函数
let { $getInfo_store } = useUser();
$getInfo_store()
// 获取数据
let accInfo_store = computed(() => useUser().$accInfo)


// 引入修改头像api
import { accModifyImg_api } from "../../api/apis.ts"
// 上传修改头像
let handleAvatarSuccess = async (file: any) => {
    console.log(file)
    //判定 上传成功后，调用修改头像的方法
    if (file.code == 0) {
        // 调用修改头像的接口
        let res = await accModifyImg_api({
            imgUrl: file.imgUrl
        });
        let { code } = res.data;
        if (code === 0) {
            // 成功 调用仓库中的函数，让它重绘视图。
            $getInfo_store();
        }
    }

}

// 上传之前的函数--主要用于限制上传文件的格式和大小
let beforeAvatarUpload = (file: any) => {
    const isJPG = file.type === "image/jpeg";
    const isPNG = file.type === "image/png";
    const isLt2M = file.size / 1024 / 1024 < 2;

    if (!isJPG && !isPNG) {
        ElMessage.error("上传头像图片只能是 JPG,PNG格式!");
    }
    if (!isLt2M) {
        ElMessage.error("上传头像图片大小不能超过 2MB!");
    }
    return (isJPG || isPNG) && isLt2M;
}
</script>

<style scoped lang="scss">
.app {
    padding: 10px;
}

::v-deep .avatar-uploader .el-upload {
    border: 1px dashed #ccc;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
}

.avatar {
    width: 100px;
    height: 100px;
    display: block;
}
</style>